<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .action{
            background-color: red;
            color: white;
            border: 1px solid #000;
        }

        .active{
            padding: 20px;
        }
    </style>
</head>
<body>
    <div title="这是div1的提示信息">这是div01</div>
    <div>这是div02</div>
    <div>这是div03</div>
    <div>这是div04</div>
    <div>这是div05</div>
    <script>
        var divs = document.querySelectorAll("div");

        // 增删改查

        // 标签对象.属性名 = 属性值; 有则修改,无则添加
        divs[1].title = "这是div2的提示信息";

        // 自定义属性 只是添加给了js中获取的标签对象 而不是添加给了标签本身
        divs[1].aaa = "bbb";

        // 给标签添加自定义属性
        divs[2].setAttribute("aaa","bbb");

        // 删除一个自定义属性
        divs[2].removeAttribute("aaa");


        // 修改
        divs[1].title = "222222";
        divs[2].setAttribute("aaa","ccc");


        // 获取html自带属性值 标签对象.属性名
        console.log(divs[1].title);

        
        // 获取自定义属性的值
        var a = divs[2].getAttribute("aaa");
        // console.log(a);

        // 获取是否带有一个自定义属性
        a = divs[2].hasAttribute("aaa");
        // console.log(a); //true/fasle


        divs[2].style = "color:red;font-size:30px";
        // divs[2].style = "color:pink";
        divs[2].style.color = "pink";
        divs[2].style.backgroundColor = "red";


        // divs[3].className = "action";
        // divs[3].className += " active";
        // divs[3].className = "action active";

        // divs[4].classList = "action"
        // 添加
        divs[4].classList.add("action")
        divs[4].classList.add("active")
        // 删除
        // divs[4].classList.remove("active");
        // 有则添加,无则删除 切换
        divs[4].classList.toggle("active");

        // 获取是否带有那个class
        a = divs[4].classList.contains("action");
        console.log(a);







    </script>
</body>
</html>